import React, { useEffect, useRef } from "react";
import APlayer from "aplayer";
import "aplayer/dist/APlayer.min.css";
import { Box, SxProps } from "@mui/system";
export interface AudioPreviewProps extends Omit<React.AudioHTMLAttributes<any>, "style"> {
  sx?: SxProps;
  cover?: string;
}
const AudioPreview = ({ src, sx, cover, ...otr }: AudioPreviewProps) => {
  const ref = useRef(null);
  const audioInstance = useRef<any>();
  useEffect(() => {
    if (src) {
      audioInstance.current = new APlayer({
        container: ref.current,
        mini: true,
        audio: { url: src },
      });
      return () => {
        audioInstance.current?.destroy();
      };
    }
  }, [src]);
  return (
    <Box
      sx={{
        height: 80,
        position: "relative",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        width: 80,
        ...sx,
      }}
    >
      <Box
        ref={ref}
        sx={{ transform: "scale(1.2)" }}
        onClick={(e) => {
          e.stopPropagation();
        }}
      ></Box>
    </Box>
  );
};
//AudioPreview.Viewer = Viewer;
export default AudioPreview;
